<template>
	<view>
		<navbar :parameter='parameter'></navbar>
		<view class="details-box">
			<view class="back">
				<image src="/static/images/attendant-details.jpg" mode="widthFix"></image>
			</view>
			<view class="attendant ">
				<view class="acea-row">
					<view class="pic-box">
						<image :src="imageUrl+attendant.head_image"></image>
					</view>
					<view class="top-right">
						<view class="acea-row row-middle">
							<text class="name">{{attendant.staff_name}}</text>
							<text class="title">{{attendant.rank_name}}{{identityName}}</text>
						</view>
						<view class="tag acea-row">
							<text v-for="(item,index) in attendant.tags" :key="index">{{item.tag_name}}</text>
						</view>
					</view>
				</view>
				<view class="num-list acea-row row-between-wrapper">
					<view class="num-item">
						累计服务 <text>{{attendant.order_viture_num}}单</text>
					</view>
					<navigator class="num-item" :url="'/pages/accompanying/evaluate_list?id='+attendant.id">
						综合评分 <text>{{attendant.comprehensive_score}}</text>
					</navigator>
					<view class="num-item	">
						执业年限 <text>{{attendant.work_year}}年</text>
					</view>
				</view>
				<view class="content-box">
					<view class="line">
						<text>简介</text>
						{{attendant.content}}
					</view>
					<view class="line">
						<text>评价</text>
						{{attendant.evaluate}}
					</view>
				</view>
				<view class="public-welfare acea-row row-between" v-if="identityType == 1">
					<view class="item left acea-row row-center-wrapper">
						<view class="icon-box acea-row row-center-wrapper">
							<u-icon name="heart-fill" color="#fff" size="20"></u-icon>
						</view>
						<view class="cont-box">
							<view class="title"> 公益陪诊{{attendant.free_num}}次 </view>
							<view class="cont"> 珍惜善意，传递温暖 </view>
						</view>
					</view>
					<navigator class="item right acea-row row-center-wrapper" :url="'/pages/accompanying/story_list?id='+attendant.id+'&isShow='+1">
						<view class="icon-box acea-row row-center-wrapper">
							<u-icon name="heart-fill" color="#fff" size="20"></u-icon>
						</view>
						<view class="cont-box">
							<view class="title"> 陪诊故事{{attendant.story_num}}条 </view>
							<view class="cont"> 珍惜善意，传递温暖 </view>
						</view>
					</navigator>
				</view>
				<view v-if="identityType==1">
					<view class="title-line"> 陪诊服务 </view>
					<view class="select-box acea-row row-between-wrapper">
						<block v-for="(item,index) in attendant.accompanying_service" :key="index">
							<view class="select-item " :class="service_id== item.service_id? 'active':''"
								@tap="select(item)">
								{{item.name}}<text>{{item.price}}{{item.unit ==1?'天':'次'}}</text>
							</view>
						</block>
					</view>
					<view class="title-line"> 代办服务 </view>
					<view class="select-box acea-row row-between-wrapper">
						<block v-for="(item,index) in attendant.agency_service" :key="index">
							<view class="select-item" :class="service_id== item.service_id?'active':''" @tap="select(item)">
								{{item.name}}<text>{{item.price}}{{item.unit ==1?'天':'次'}}</text>
							</view>
						</block>
					</view>
				</view>
				<view v-else>
					<view class="title-line"> 陪护服务 </view>
					<view class="select-box acea-row row-between-wrapper">
						<block v-for="(item,index) in attendant.escort_service" :key="index">
							<view class="select-item" :class="service_id== item.service_id?'active':''" @tap="select(item)">
								{{item.name}}<text>{{item.price}}{{item.unit ==1?'天':'次'}}</text>
							</view>
						</block>
					</view>
				</view>
				<view class="title-line"> 可约日期 </view>
				<view class="date-box">
					<scroll-view scroll-x="true" class="date-table">
						<block v-for="(item,index) in attendant.schedule" :key="index">
							<view class="select-item" :class="item.isOrder?'isOrder':''"
								@click="choic_date(item,index)">
								<view class="select-top">
									<view class=""> {{item.week}} </view>
									<view class="date"> {{item.date}} </view>
								</view>
								<view class="order-box" :class="item.can_appointment == 1?'order':''">
									<text>{{item.can_appointment == 1?'点击预约':'已约满'}} </text>
								</view>
							</view>
						</block>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="bottom-box acea-row row-between-wrapper">
			<view class="total">
				总费用:<text>￥{{total_price}}元</text>
			</view>
			<view @click="toPage" class="order-btn">立即下单</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<login :isAuto="false" ref="mySon" @phone_show="phone_show" ></login>
		<phone :isShow="isShow2" @close="close2" @chamgs="chamgs2"></phone>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				parameter: {
					'navbar': '1',
					'return': '1',
					'title': '陪诊师详情',
					'color': true,
					'class': 'transparent'
				},
				identityName:'陪诊师',
				identityType:1,
				imageUrl: this.imageUrl,
				attendant: {},
				total_price: 0,
				service_id: '',
				date: '',
				service_name: '',
				time_slot:'',
				isShow2: false,
			};
		},
		onLoad(option) {
			if(uni.getStorageSync('identity') == 1){
				this.parameter.title = '陪诊师详情';
			}else{
				this.parameter.title = '陪护师详情';
				this.identityName = '陪护师';
				this.identityType = 2;
			}
			this.info(option.id)
			uni.setStorageSync('staff_id', option.id);
			this.service_id = uni.getStorageSync('service_id');
			this.total_price = Number(uni.getStorageSync('price'));
			console.log(this.service_id)
		},
		onShow() {

		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
		
		},
		onShareTimeline(res) { //分享到朋友圈
		
		},
		//监听屏幕滚动 判断上下滚动  
		onPageScroll: function(e) {
			if (e.scrollTop > 60) {
				this.parameter.class = 'on'
			} else {
				this.parameter.class = 'transparent'
			}

		},
		methods: {
			async info(id) {
				const res = await this.$myRequest({
					url: '/api/staff/info',
					data: {
						openid: uni.getStorageSync('openid'),
						id: id,
					}
				})
				this.attendant = res.data.data
			},
			select(item) {
				this.service_id = item.service_id;
				this.service_name = item.name;
				this.time_slot = item.time_slot;
				this.total_price = Number(item.price);
				uni.setStorageSync('url', item.url)
			},
			choic_date(item, index) {
				if (item.can_appointment == 1) {
					var schedule = this.attendant.schedule;
					schedule.forEach(function(item) {
						item.isOrder = false;
					});
					this.date = '';
					if (schedule[index].isOrder) {
						schedule[index].isOrder = false;
						this.date = '';
					} else {
						schedule[index].isOrder = true;
						this.date = item.date;
					}
					this.attendant.schedule = schedule;
					console.log(this.attendant.schedule)
				} else {
					this.$refs.uToast.show({
						type: 'error',
						message: '无法预约，请重新选择'
					})
				}
			},
			phone_show(){
				this.isShow2 = true;
			},
			close2() {
				this.isShow2 = false
				
			},
			toPage() {
				var url = uni.getStorageSync('url');
				var openid = uni.getStorageSync('openid');
				console.log(url)
				if (openid) {
					if (this.date == '') {
						this.$refs.uToast.show({
							type: 'error',
							message: '请选择预约时间'
						})
					} else if (this.service_id == '') {
						this.$refs.uToast.show({
							type: 'error',
							message: '请选择服务项目'
						})
					} else {
						uni.navigateTo({
							url: url + '?date=' + this.date + '&service_id=' + this.service_id + '&total_price=' + this.total_price+ '&time_slot=' + this.time_slot
						})
					}
				} else {
					// this.chamgs()
					this.$refs.mySon.login();
				}


			}
		}
	}
</script>

<style lang="scss" scoped>
	.details-box {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		padding-top: 340rpx;
	}

	.back {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;
	}

	.back image {
		width: 100%;
	}

	.attendant {
		width: 100%;
		border-radius: 12rpx 12rpx 0 0;
		background-color: #F5F6F8;
		padding: 20rpx 30rpx;
		position: relative;
		z-index: 3;
	}

	.attendant .pic-box {
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-top: -100rpx;
		background-color: #fff;
	}

	.attendant .pic-box image {
		width: 100%;
		height: 100%;
	}

	.attendant .top-right {
		padding-left: 30rpx;
		flex: 1;
	}

	.attendant .top-right .name {
		font-size: 33rpx;
		color: #000;
	}

	.attendant .top-right .title {
		width: 132rpx;
		height: 36rpx;
		background: #FE8802;
		border-radius: 6rpx;
		color: #fff;
		text-align: center;
		line-height: 36rpx;
		font-size: 24rpx;
		margin-left: 10rpx;
	}

	.attendant .top-right .tag {
		padding-top: 20rpx;
	}

	.attendant .top-right .tag text {
		width: 100rpx;
		height: 33rpx;
		background: rgba($color: #1A8DFE, $alpha: .1);
		color: #3893FF;
		font-size: 21rpx;
		border-radius: 6rpx;
		margin-right: 12rpx;
		text-align: center;
		line-height: 33rpx;
	}

	.attendant .num-list {
		padding: 30rpx 0;
	}

	.attendant .num-item {
		font-size: 26rpx;
		color: #000;
	}

	.attendant .num-item text {
		font-size: 33rpx;
		color: #347DFE;
		padding-left: 10rpx;
	}

	.attendant .content-box {
		padding: 30rpx;
		background-color: #fff;
		margin-bottom: 30rpx;
		border-radius: 12rpx;
	}

	.attendant .content-box .line {
		color: #666666;
		font-size: 24rpx;
		line-height: 1.6;
		margin-bottom: 20rpx;
	}

	.attendant .content-box .line text {
		display: inline-block;
		width: 55rpx;
		height: 30rpx;
		line-height: 30rpx;
		color: #fff;
		background: #1B82FF;
		font-size: 21rpx;
		border-radius: 4rpx;
		text-align: center;
		margin-right: 10rpx;
	}

	.public-welfare .item {
		width: 330rpx;
		height: 130rpx;
		padding: 0 20rpx;
		border-radius: 12rpx;
	}

	.public-welfare .item.left {
		background: #FEFDF7;
	}

	.public-welfare .item.right {
		background: #FFF5F3;
	}

	.public-welfare .item .icon-box {
		width: 57rpx;
		height: 57rpx;
		color: #fff;
		border-radius: 50%;
	}

	.public-welfare .item.left .icon-box {
		background: linear-gradient(-58deg, #F1AC6A, #FDD2A7);
	}

	.public-welfare .item.right .icon-box {
		background: linear-gradient(-34deg, #FB5F4F, #FCD3D3);
	}

	.public-welfare .item .cont-box {
		flex: 1;
		padding-left: 20rpx;
		color: #A8A8A8;
		font-size: 22rpx;
	}

	.public-welfare .item .cont-box .title {
		font-size: 28rpx;
		color: #000;
		padding-bottom: 10rpx;
	}

	.title-line {
		height: 90rpx;
		line-height: 90rpx;
		font-size: 34rpx;
		font-family:Source Han Sans CN;
	}

	.select-box {
		padding: 30rpx 20rpx;
		padding-bottom: 0;
		background-color: #fff;
		border-radius: 12rpx;
	}

	.select-box .select-item {
		width: 310rpx;
		height: 57rpx;
		text-align: center;
		line-height: 57rpx;
		color: #000;
		font-size: 27rpx;
		background: #F4F7FA;
		margin-bottom: 30rpx;
		border-radius: 30rpx;
		border: 1px solid #F4F7FA;
		font-family:Source Han Sans CN;
	}

	.select-box .select-item text {
		margin-left: 10rpx;
	}

	.select-box .select-item.active {
		border: 1px solid #347DFE;
		color: #347DFE;
	}

	.select-box .select-item.active text {
		color: #FF4242;
	}

	.date-box {
		padding: 30rpx 20rpx;
		padding-right: 0;
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 150rpx;
	}

	.date-table {
		width: 100%;
		white-space: nowrap;
		border: 1px solid #DBDBDB;
		border-right: none;
	}

	.date-table .select-item {
		display: inline-block;
		width: 100rpx;
		text-align: center;
		border-right: 1px solid #DBDBDB;
		vertical-align: top;
	}

	.date-table .select-item .select-top {
		border-bottom: 1px solid #DBDBDB;
		height: 100rpx;
		padding-top: 20rpx;
		color: #A1A1A1;
		font-size: 24rpx;
	}

	.date-table .select-item .select-top .date {
		color: #000;
	}

	.date-table .select-item .order-box {
		background-color: #F7F7F7;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100rpx;
		color: #BEBEBE;
		padding: 0 20rpx;
		font-size: 24rpx;
	}

	.date-table .select-item.isOrder .order-box.order {
		border: 1px solid #347DFE;
		color: #347DFE;
		background: #F4F7FA;
	}

	.date-table .select-item .order-box.order {
		background-color: #0376FD;
		color: #fff;
	}

	.date-table .select-item .order-box text {
		width: 97%;
		white-space: break-spaces;
	}

	.bottom-box {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #fff;
		padding: 0 30rpx;
		height: 120rpx;
		z-index: 10;
	}

	.bottom-box .total text {
		color: #FF4242;
	}

	.bottom-box .order-btn {
		width: 250rpx;
		height: 70rpx;
		background: #347DFE;
		border-radius: 10px;
		color: #fff;
		text-align: center;
		line-height: 70rpx;
	}
</style>
